<template>
    <div>

        <!-- 顶部按钮和描述 -->
        <el-row type="flex" justify="space-between" class="btn_wrapper">
          <el-col style="width:250px;font-size:12px;color:pink"><div class="grid-content bg-purple">说明：目前支持学科和关键字条件筛选</div></el-col>
          <el-col style="width:97px"><div class="grid-content bg-purple-light">
            <el-button class="el-button el-button--success el-button--small" @click="$router.push('/questions/new')">
              <i class="el-icon-edit"></i>
              新增试题
            </el-button>
          </div></el-col>
        </el-row>

        <!-- 表单筛选区域 -->
        <el-form ref="form" :model="screenForm" label-width="80px" size="small">
          <el-row :gutter="20">

            <el-col :span="6" style="padding:0px">
              <div class="grid-content bg-purple">
                <el-form-item label="学科">
                  <el-select @change="getSubjectSonInfo" v-model="screenForm.subjectID" placeholder="请选择" popper-append-to-body>
                    <el-option v-for="item in subjectIDList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>

            <el-col :span="6"  style="padding:0px">
              <div class="grid-content bg-purple">
                <el-form-item label="二级目录">
                  <el-select v-model="screenForm.catalogID" placeholder="请选择">
                    <el-option v-for="item in twoDetailList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>

            <el-col :span="6"  style="padding:0px">
              <div class="grid-content bg-purple">
                <el-form-item label="标签">
                  <el-select v-model="screenForm.tags" placeholder="请选择">
                     <el-option v-for="item in tagsList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>

            <el-col :span="6"  style="padding:0px">
              <div class="grid-content bg-purple">
                <el-form-item label="关键字">
                  <el-input v-model="screenForm.keyword" placeholder="根据题干搜索"></el-input>
                </el-form-item>
              </div>
            </el-col>

          </el-row>

          <el-row :gutter="20">
            <el-col :span="6"  style="padding:0px">
              <div class="grid-content bg-purple">
                <el-form-item label="试题类型">
                  <el-select v-model="screenForm.questionType" placeholder="请选择">
                    <el-option v-for="item in questionType" :key="item.id" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>

            <el-col :span="6"  style="padding:0px">
              <div class="grid-content bg-purple">
                <el-form-item label="难度">
                  <el-select v-model="screenForm.difficulty" placeholder="请选择">
                    <el-option v-for="item in difficulty" :key="item.id" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>

            <el-col :span="6"  style="padding:0px">
              <div class="grid-content bg-purple">
                <el-form-item label="方向">
                  <el-select v-model="screenForm.direction" placeholder="请选择">
                    <el-option v-for="(item,index) in direction" :key="index" :label="item" :value="item"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>

            <el-col :span="6"  style="padding:0px">
              <div class="grid-content bg-purple">
                <el-form-item label="录入人">
                  <el-select v-model="screenForm.creatorID" placeholder="请选择">
                    <el-option v-for="item in EntryUserList" :key="item.id" :label="item.username" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>

          </el-row>

          <el-row :gutter="20">
            <el-col :span="6"  style="padding:0px">
              <div class="grid-content bg-purple">
                <el-form-item label="题目备注">
                  <el-input v-model="screenForm.remarks"></el-input>
                </el-form-item>
              </div>
            </el-col>

            <el-col :span="6"  style="padding:0px">
              <div class="grid-content bg-purple">
                <el-form-item label="企业简称">
                  <el-input v-model="screenForm.shortName"></el-input>
                </el-form-item>
              </div>
            </el-col>

            <el-col :span="6"  style="padding:0px">
              <div class="grid-content bg-purple">
                <el-form-item label="城市">
                      <el-col :span="11"  style="padding:0px;margin-right:2%">
                        <el-select v-model="screenForm.province" placeholder="请选择">
                          <el-option v-for="(item,index) in provinces" :key="index" :label="item" :value="item"></el-option>
                        </el-select>
                      </el-col>
                      <el-col :span="11" style="padding:0px">
                        <el-select v-model="screenForm.city" no-data-text="请先选择市" @visible-change="getCitys" placeholder="请先选择市">
                          <el-option v-for="(item,index) in citys" :key="index" :label="item" :value="item"></el-option>
                        </el-select>
                      </el-col>
                </el-form-item>
              </div>
            </el-col>

            <el-col :span="6"  style="padding:0px">
              <div class="grid-content bg-purple">
                <el-row type="flex" justify="end">
                <el-button size="small" @click="clearScreenForm">清除</el-button>
                <el-button size="small" type="primary" @click="subScreenTab">搜索</el-button>
                </el-row>
              </div>
            </el-col>

          </el-row>
        </el-form>
    </div>
</template>

<script>
// 导入筛选表格部分常量
import { questionType, difficulty, direction } from '@/api/hmmm/constants'
import { provinces, citys } from '@/api/hmmm/citys'

// 导入获取简单学科列表api
import { simple as entryUser } from '@/api/base/users'
import { twoDetail } from '@/api/hmmm/directorys'
import { simple } from '@/api/hmmm/tags'
export default {
  name: 'HmmmXxxxScreenSubform',
  props: {
    subjectIDList: {
      type: Array,
      required: true
    }
  },

  data () {
    return {
      // 筛选表单双向绑定数据
      screenForm: {
        subjectID: null, // 学科
        catalogID: null, // 二级目录
        tags: '', // 标签
        keyword: null, // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        province: '', // 企业所在省份
        city: '' // 企业所在城市
      },
      twoDetailList: [], // 二级目录渲染列表
      tagsList: [],
      EntryUserList: [], // 录入人渲染列表
      questionType, // 试题类型渲染常量列表
      difficulty, // 难度渲染常量列表
      direction, // 方向渲染常量列表
      // 城市
      provinces: provinces(), // 市级渲染列表
      citys: [] // 对应市级城市渲染列表
    }
  },
  created () {
    this.getEntryUser()
  },

  mounted () {

  },

  methods: {
    // 页面一加载获取录入人
    async getEntryUser () {
      const { data: res } = await entryUser()
      // console.log(res)
      this.EntryUserList = res
    },

    // 用户选择学科时触发：获得对应学科的详细信息
    async getSubjectSonInfo () {
      const { data: res } = await twoDetail({ subjectID: this.screenForm.subjectID })
      // console.log(res)
      this.twoDetailList = res
      const { data } = await simple({ subjectID: this.screenForm.subjectID })
      // console.log(data)
      this.tagsList = data
    },

    // 点击城市下拉框时触发
    getCitys (type) {
      if (type === false) return
      this.citys = citys(this.screenForm.province)
    },
    // 点击清除将表单的数据重置
    clearScreenForm () {
      this.screenForm = {}
      // this.$emit('updateScreenForm')
    },
    // 点击搜索触发
    subScreenTab () {
      this.$emit('getChildScreenForm', this.screenForm)
    }
  }
}
</script>

<style lang="scss" scoped>
// bug2.版本
.btn_wrapper{
  margin-bottom: 15px;
}
.el-select{
  display: block;
}
</style>
